<<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*  todo
            之前的this :
                在函数外 ：表示window对象
                在函数内 ：表示调用函数的对象
            箭头函数和普通函数的区别 ：
                1、普通函数中有自己的this对象，即调用函数的对象
                2、 箭头函数中没有自己的this对象，即this取决于外部环境
   */
    console.log(this);
    var student1 = {
        id: 1,
        name: '张三',
        age: 18,
        sayHello: function () {
            console.log(`hello , ${this.name}`);
        }
    }
    student1.sayHello();
    var student2 = {
        id: 2,
        name: '李四',
        age: 19,
        sayHello: () => {
            console.log(`hello , ${this.name}`);
        }
    }
    student2.sayHello();
    var student3 = {
        id: 3,
        name: '王五',
        age: 20,
        sayHello: function () {
            setTimeout(function () {
                console.log(`hello , ${this.name}`);
            }, 100)
        } ,
        hellohtml: () => {
            console.log(`hello , ${this.name} , ${this.age} , ${this.id}`);
        }
    }
    student3.sayHello();
    student3.hellohtml();
</script>

</body>
</html>